<div
  class="input-control-buttons"
  [ngClass]="{
    disabled: disabled,
    'devui-input-number-lg': size === 'lg',
    'devui-input-number-sm': size === 'sm',
    'devui-gray-style': styleType === 'gray'
  }"
>
  <span class="input-control-button input-control-inc" [ngClass]="{ disabled: disabledInc }" #incButton>
    <svg
      class="devui-svg-icon-arrow"
      width="1em"
      height="1em"
      viewBox="0 0 16 16"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z"
          fill-rule="nonzero"
        ></path>
      </g>
    </svg>
  </span>
  <span class="input-control-button input-control-dec" [ngClass]="{ disabled: disabledDec }" #decButton>
    <svg
      class="devui-svg-icon-arrow"
      width="1em"
      height="1em"
      viewBox="0 0 16 16"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z"
          fill-rule="nonzero"
        ></path>
      </g>
    </svg>
  </span>
</div>
<div
  class="input-container"
  [ngClass]="{
    'devui-input-number-lg': size === 'lg',
    'devui-input-number-sm': size === 'sm',
    'devui-gray-style': styleType === 'gray'
  }"
>
  <input
    class="input-box devui-input"
    [ngClass]="{ disabled: disabled }"
    [placeholder]="placeholder"
    [attr.readonly]="disabled ? '' : null"
    (keydown)="handleKeyDown($event)"
    (input)="protectInput($event)"
    (blur)="ensureValueIsValid($event)"
    (paste)="protectInput($event)"
    #inputElement
  />
</div>
